<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>员工列表</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body a {
            text-decoration: none;
            color: #0d3a4b;
        }

        .active {
            color: #ffffff;
        }

        .wrap {
            width: 700px;
            height: 500px;
            background-color: skyblue;
            margin: 0 auto;
            position: relative;
        }

        .wrap #table {
            width: 460px;
            border-radius: 12px;
            position: absolute;
            left: 50%;
            top: 160px;
            transform: translateX(-50%);
            box-sizing: border-box;
            overflow: hidden;
        }

        .wrap #table thead {
            width: 100%;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border-top-left-radius: 12px;
            border-top-right-radius: 12px;
            color: #fff;
            background: #4cbfe5;
        }

        .wrap #table thead a {
            color: #fff;
        }

        .wrap #table tbody {
            color: #19c2ff;
        }

        .wrap #table tbody a {
            color: #19c2ff;
        }

        .wrap #table tbody tr {
            background: #fff;
        }

        .ctrl {
            position: absolute;
            left: 200px;
            top: 100px;
        }

        .ctrl div {
            width: 300px;
            line-height: 30px;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
        }

        h1 {
            text-align: center;
            padding-top: 20px;
            color: white;
        }

        td {
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <h1>员工列表</h1>
        <div class="ctrl">
            <div class="age_sort nu">
                <a href="javascript:;">年龄从小到大</a>
                <a href="javascript:;">年龄从大到小</a>
                <a href="javascript:;" class="active">默认排序</a>
            </div>
            <div class="gender_show">
                <a href="javascript:;">只显示男性</a>
                <a href="javascript:;">只显示女性</a>
                <a href="javascript:;" class="active">默认</a>
            </div>
        </div>
        <table id="table">
            <thead>
                <tr>
                    <th>id</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>0</th>
                    <th>小明</th>
                    <th>24</th>
                    <th>男</th>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        var data = [
            {
                id: 1,
                name: '小明',
                age: 24,
                gender: '男'
            },
            {
                id: 2,
                name: '小芳',
                age: 30,
                gender: '女'
            },
            {
                id: 3,
                name: '小美',
                age: 31,
                gender: '女'
            },
            {
                id: 4,
                name: '小刚',
                age: 21,
                gender: '男'
            },
            {
                id: 5,
                name: '小琪',
                age: 18,
                gender: '女'
            }
        ];

        // 添加数据
        function fn(data){
            // 获取tbody
            var tbodyEL = document.querySelector('tbody')
            // 清空内容
            tbodyEL.innerHTML = '';

            // 循环数据，根据数据生成tr标签
            data.forEach(function(item){
                // 创建tr
                var trEL = document.createElement('tr')
                // 渲染 tr 内容
                trEL.innerHTML = `
                    <td>${item.id}</td>
                    <td>${item.name}</td>
                    <td>${item.age}</td>
                    <td>${item.gender}</td>
                `
                // 把渲染的内容添加到tr
                tbodyEL.appendChild(trEL)
            })
        }
        // 调用
        fn(data)

        // 通过变量 记录 年龄筛选按钮  和 性别筛选按钮所在的位置
        let ageIndex = 2; // 记录年龄的按钮位置索引
        let genderIndex = 2; // 记录性别的按钮位置索引

        var ageEl = document.querySelectorAll('.age_sort a')
        var sortArr = [
            function(data){
                var res = JSON.parse(JSON.stringify(data))
                res.sort(function(a,b){
                    return a.age - b.age;
                })
                return res
            },function(data){
                var res = JSON.parse(JSON.stringify(data))
                res.sort(function(a,b){
                    return b.age - a.age;
                })
                return res
            },function(data){
                return data
            }]

        ageEl.forEach(function(item,key){
            item.onclick = function(){
                // console.log('点击了a',key);
                ageEl.forEach(function(ele){
                    ele.classList.remove("active")
                })
                this.classList.add("active")
                ageIndex = key;

                var res = sortArr[key](data); // 年龄排序
                var newres =  genderArr[genderIndex](res); // 年龄排序的基础做性别的筛选
                fn(newres)
            }
        })

        // 性别筛选
        var genderEl = document.querySelectorAll('.gender_show a')
        var genderArr = [
            function(data){
                // 过滤 
                return data.filter(function(item){
                    return item.gender === '男'
                })
            },function(data){
                return data.filter(function(item){
                    return item.gender === '女'
                })
            },function(data){
                return data
            }

        ]

        genderEl.forEach(function(item,key){
            item.onclick = function(){
                // console.log('点击了a',key);
                genderEl.forEach(function(ele,k){
                    if(k === key){
                        ele.classList.add("active")
                    }else{
                        ele.classList.remove("active")
                    }
                })
                genderIndex = key
                var res = genderArr[key](data);
                var newres = sortArr[ageIndex](res)
                fn(newres)
            }
        })

        // 数据驱动视图 
        // 一 、根据数据显示视图 

        // 通过一个函数 ，给我数据 就会把数据渲染到视图里
        // function renderDom(data) {
        //     // 1.把tbody里的静态tr清空掉
        //     var tbodyEle = document.querySelector("tbody");
        //     // console.log(tbodyEle);
        //     tbodyEle.innerHTML = "";


        //     //2. 根据数据来生成 tr 标签,里面的内容就是数据里的内容
        //     // callback  cb
        //     data.forEach(function (item) {
        //         var trEle = document.createElement("tr");
        //         trEle.innerHTML = `
        //             <td>${item.id}</td>
        //             <td>${item.name}</td>
        //             <td>${item.age}</td>
        //             <td>${item.gender}</td>
        //     `
        //         tbodyEle.appendChild(trEle);
        //     })
        // }

        // renderDom(data);

        // // 通过全局变量 来记录 年龄筛选按钮  和 性别筛选按钮所在的位置
        // let ageIndex = 2; // 记录年龄的按钮位置索引
        // let genderIndex = 2; // 记录性别的按钮位置索引

        // // 二、年龄排序 ：1.处理数据 2.渲染视图
        // // 1.处理数据
        // var ageEles = document.querySelectorAll(".age_sort a");
        // console.log(ageEles);
        // // 把所有的排序方法放在一个数组里
        // var sortArr = [function (data) {
        //     var res = JSON.parse(JSON.stringify(data))
        //     res.sort(function (a, b) {
        //         return a.age - b.age;
        //     })
        //     return res;
        // }, function (data) {
        //     var res = JSON.parse(JSON.stringify(data))
        //     res.sort(function (a, b) {
        //         return b.age - a.age;
        //     })
        //     return res;
        // }, function (data) {
        //     return data;
        // }]


        // ageEles.forEach(function (item, key) {
        //     item.onclick = function () {
        //         console.log("点击了a标签", key);
        //         // 1.干掉其他 ，保留自己
        //         // 其他样式去掉；
        //         ageEles.forEach(function (ele) {
        //             // ele.className = "";
        //             //  ele.className += " active"
        //             ele.classList.remove("active");
        //         })

        //         this.classList.add("active");
        //         ageIndex = key;
        //         // this.className += " active";

        //         var res = sortArr[key](data);  // 年龄排序的筛选
        //         var newres = genderArr[genderIndex](res) // 在年龄数据的基础上做性别的筛选
        //         renderDom(newres);
        //     }
        // })


        // var genderEles = document.querySelectorAll(".gender_show a");
        // var genderArr = [function (data) {
        //     return data.filter(function (item) {
        //         return item.gender === "男";
        //     })

        // }, function (data) {
        //     return data.filter(function (item) {
        //         return item.gender === "女";
        //     })

        // }, function (data) {
        //     return data;
        // }]

        // genderEles.forEach(function (item, key) {
        //     item.onclick = function () {
        //         // console.log(key);

        //         // 判断循环的 索引值 是否和点击的按钮的索引值一致 
        //         // 如果一致 那么 就把当前这个元素加上active类名 否则 就去掉 active类名
        //         genderEles.forEach(function (ele, k) {
        //             if (k === key) {
        //                 ele.classList.add("active");
        //             } else {
        //                 ele.classList.remove("active");
        //             }
        //         })
        //         genderIndex = key;
        //         var res = genderArr[key](data); // 性别筛选
        //         var newres = sortArr[ageIndex](res);  // 在性别筛选基础上 做一次年龄筛选
        //         //    console.log(res);
        //         renderDom(newres);
        //     }
        // })

        // 姓名筛选 和 性别筛选 联动 
        // 在筛选姓名的时候筛选完毕之后 在筛选完的数据基础上 在做一次 性别筛选
    </script>
</body>

</html>